<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的项目圈-方案设计2</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body class="wayDesign2Box">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>	
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">侨乡物业项目</div>
				<span class="contentTitleSever">></span>
				<div class="contentSecondTitle">设计预评价</div>
				<div class="help">
					<a href="javascript:void(0)">
						<span class="iconfont">&#xe60c;</span>
						<span>技术支持</span>						
					</a>
				</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="wayDesign2">
				
				<!--Vue模态框 start-->
				<el-dialog title="材料详情" v-model="dialogTableVisible" class="materialDetail">
				  	<div class="modalContentBox">
				  		<div class="modalContent">
				  			<div class="imgForm">
				  				<div class="imgBox">
				  					<img src="../img/sourceImg.jpg"/>
				  				</div>
				  				<div class="imgDec">
				  					<div class="decBox">
				  						<label>材料类别</label>
				  						<div class="dec">木地板/实木地板</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>品牌</label>
				  						<div class="dec">美宜佳</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>型号</label>
				  						<div class="dec">dt8999</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>材料类型</label>
				  						<div class="dec">干材料</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>规格</label>
				  						<div class="dec">-</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产商</label>
				  						<div class="dec">万科</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产日期</label>
				  						<div class="dec">2017-10-09</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>检测单位</label>
				  						<div class="dec">检验东莞实验室</div>
				  						<div class="clear"></div>
				  					</div>
				  				</div>
				  				<div class="clear"></div>
				  			</div>
				  			<div class="listForm">
				  				<ul class="wid100">
				  					<li class="listFormTitle">
				  						<div class="listSource">污染源</div>
				  						<div class="release">释放率(mg/m2.h)</div>
				  						<div class="releaseLevel">释放等级</div>
				  						<div class="clear"></div>
				  					</li>
				  					<li class="listFormDec" v-for="modalList in modalForm">
				  						<div class="listSource">{{modalList.source}}</div>
				  						<div class="release">{{modalList.rate}}</div>
				  						<div class="releaseLevel">{{modalList.level}}</div>
				  						<div class="clear"></div>
				  					</li>
				  				</ul>
				  			</div>
				  			<button class="greenBtn fr" @click="successful1">取消收藏</button>
				  			<div class="clear"></div>
				  		</div>
				  	</div>
				</el-dialog>				
				<!--Vue模态框 end-->
					
				<div class="projectBox wayDesign1StepStatusBox">
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">1</div>
								<div class="stepName">房间信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">2</div>
								<div class="stepName">添加材料</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine "></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">时间设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">4</div>
								<div class="stepName">通风设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">计算结果</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				
				<div class="projectBox updateImgBox">
					<div class="projectBoxTop">
						<span class="projectBoxName">户型图</span>
						<div class="clear"></div>
					</div> 
					<div class="materialListSelect">
						<div class="menu wrongActive finshActive">
							<span class="el-icon-check"></span>
							房间1
						</div>
						<div class="menu active">房间2</div>
						<div class="menu wrongActive">房间3</div>
						<div class="more selectComponent">
							<el-dropdown trigger="click">
								<span class="el-dropdown-link">更多</span>
								<el-dropdown-menu slot="dropdown">
								    <el-dropdown-item><span class="el-icon-check mr5"></span>房间4</el-dropdown-item>
								    <el-dropdown-item><span class="el-icon-check mr5"></span>房间5</el-dropdown-item>
								    <el-dropdown-item><span class="el-icon-check mr5"></span>房间6</el-dropdown-item>
								    <el-dropdown-item><span class="el-icon-check mr5"></span>房间7</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="clear"></div>
					</div>
					<ul class="materialList hidden">
						<li class="listDec">
							<div class="materialType">材料类型</div>
							<div class="materialArea">用料总面积</div>
							<div class="materialImg">图片</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="materialControl">操作</div>
							<div class="clear"></div>
						</li>
						<li class="materialDec">
							<div class="materialType">强化木地板</div>
							<div class="materialArea">16.5</div>
							<div class="materialImg">
								<img src="../img/materialImg.jpg"/>
							</div>
							<div class="controlRequest">
								<div class="materialContentList">
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="controlBtnBox">
								<el-button type="text" @click="dialogTableVisible = true"><a href="javascript:void(0);" class="check">查看</a></el-button>
								<a href="javascript:void(0);" class="delete">删除</a>
							</div>
							<div class="clear"></div>
						</li>
					</ul>
					<ul class="materialList">
						<li class="listDec">
							<div class="materialType">材料类型</div>
							<div class="materialArea">用料总面积</div>
							<div class="materialImg">图片</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="materialControl">操作</div>
							<div class="clear"></div>
						</li>
						<li class="materialDec">
							<div class="materialType">强化木地板</div>
							<div class="materialArea">555555.5</div>
							<div class="materialImg">
								<img src="../img/materialImg.jpg"/>
							</div>
							<div class="controlRequest">
								<div class="materialContentList">
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="controlBtnBox">
								<el-button type="text" @click="dialogTableVisible = true"><a href="javascript:void(0);" class="check">查看</a></el-button>
								<a href="javascript:void(0);" class="delete">删除</a>
							</div>
							<div class="clear"></div>
						</li>
					</ul>
					<ul class="materialList hidden">
						<li class="listDec">
							<div class="materialType">材料类型</div>
							<div class="materialArea">用料总面积</div>
							<div class="materialImg">图片</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="materialControl">操作</div>
							<div class="clear"></div>
						</li>
						<ul>
							<li class="materialDec">
								<div class="materialType">强化木地板</div>
								<div class="materialArea">200000.5</div>
								<div class="materialImg">
									<img src="../img/materialImg.jpg"/>
								</div>
								<div class="controlRequest">
									<div class="materialContentList">
										<div class="wid20 fl tac">
											<p class="materialContent">0.3</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">0.4</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">0.3</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">0.4</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">0.3</p>
										</div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="controlBtnBox">
									<el-button type="text" @click="dialogTableVisible = true"><a href="javascript:void(0);" class="check">查看</a></el-button>
									<a href="javascript:void(0);" class="delete">删除</a>
								</div>
								<div class="clear"></div>
							</li>
						</ul>
					</ul>
					<div class="materialDec addLine" @click="dialogTableVisible2 = true">
						<a href="javascript:void(0);" class="addMaterial">
							<span class="iconfont-tcl" style="font-size: 12px;">&#xe625;</span>
							<span>添加材料</span>
						</a>
					</div>
					<p class="tips">
						<b>
							您可将当前房间的材料信息批量复制到其它房间，但是不同房间此啊聊的用料面积需单独填写,
							<a href="javascript:void(0);" class="copy"  @click="dialogTableVisible1 = true">立即复制</a>
						</b>
					</p>
					<div class="inputGroup">
						<label class="fl">计算方法</label>
						<div class="computed selectComponent fl">
							<template>
								<el-select placeholder="性能指标算法" v-model="buildingType">
								    <el-option
								      v-for="buildingType in buildingTypes"
								      :label="buildingType.label"
								      :value="buildingType.value"
								      :key="buildingType">
								    </el-option>
								</el-select>
							</template>
						</div>
						<div class="clear"></div>
					</div>
					<div class="wid100 tac">
						<button class="backUpdate whiteLargerBtn">返回修改</button>		
						<button class="nextBtn greenLargerBtn">下一步</button>						
					</div>

				</div>	
				
				<!--模态框 start-->
				<el-dialog title="批量复制" v-model="dialogTableVisible1" class="copyModalBox">
					<div class="copyBoxContentBox">
						<div class="copyBoxContent">
							<div class="checkBox">
								<el-checkbox class="allSelect"></el-checkbox>
								<span>全选</span>
							</div>
							<div class="checkBox">
								<el-checkbox class="oneSelect"></el-checkbox>
								<span>选项一</span>
							</div>
							<div class="checkBox">
								<el-checkbox class="oneSelect"></el-checkbox>
								<span>选项二</span>
							</div>
							<div class="clear"></div>
						</div>
						<div class="copyBoxBtnGroup">
							<a class="cancel" @click="dialogTableVisible1 = false">取消</a>
							<button class="sure" :plain="true" @click="successful2">确定</button>
						</div>
						<div class="clear"></div>
					</div>	
				</el-dialog>		
				<!--模态框end-->
				
				<!--添加材料模态框 start-->
				<el-dialog title="添加材料" class="addMaterialModalBox" v-model="dialogTableVisible2">
					<div class="addMaterialModalBoxContent">
						<div class="wid100" style="border-top: 1px solid #d9d9d9;margin-bottom: 20px;"></div>
						<div class="contentLeft">
							<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark" :default-openeds="['1']">
						      	<el-submenu index="1">
						        	<template slot="title">导航一</template>
							        <el-menu-item index="1-1">选项1</el-menu-item>
							        <el-menu-item index="1-2">选项2</el-menu-item>
						          	<el-menu-item index="1-3">选项3</el-menu-item>
						        	<el-submenu index="1-4">
								        <template slot="title">选项4</template>
								        <el-menu-item index="1-4-1">选项1</el-menu-item>
						        	</el-submenu>
						      	</el-submenu>
						      	<el-menu-item index="2">导航二</el-menu-item>
						      	<el-menu-item index="3">导航三</el-menu-item>
						    </el-menu>
						</div>
						<div class="contentRight">
							<div class="secondMaterialListSelect">
								<div class="secondMenu active">共享材料库</div>
								<div class="secondMenu wrongActive">我的材料库</div>
								<div class="secondMenu wrongActive">企业材料库</div>
								<div class="secondMenu wrongActive">我的收藏</div>
								<div class="clear"></div>
							</div>
							<div class="priceAndLevelTitle">
								<div class="levelBox">
									<label>星级</label>
									<div class="levelSelectBox selectComponent">
										<template>
										  	<el-select v-model="value1">
											    <el-option
											      v-for="item in options1"
											      :key="item.value"
											      :label="item.label"
											      :value="item.value">
											    </el-option>
										  	</el-select>
										</template>
									</div>
									<div class="levelSelectBox selectComponent">
										<template>
										  	<el-select v-model="value2">
											    <el-option
											      v-for="item in options2"
											      :key="item.value"
											      :label="item.label"
											      :value="item.value">
											    </el-option>
										  	</el-select>
										</template>
									</div>
									<input type="type" class="levelInput" placeholder="输入关键词"/>
									<button class="searchBtn">搜索</button>
								</div>
								<!--<div class="fr">
									<span class="iconfont mr10 active" style="cursor: pointer;">&#xe790;</span>
									<span class="iconfont" style="cursor: pointer;">&#xe6e5;</span>
									<div class="clear"></div>
								</div>-->
								<div class="clear"></div>
							</div>
							<ul class="materialRoomList">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="shareList in shareForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand">{{shareList.brand}}</div>
									<div class="materialType">{{shareList.type}}</div>
									<div class="materialImg"><img v-bind:src="shareList.src"></div>
									<div class="materialModel">{{shareList.model}}</div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent">{{shareList.jiaquan}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{shareList.TOVC}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{shareList.ben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{shareList.jiaben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{shareList.erjiaben}}</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>	
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="myList in myForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand">{{myList.brand}}</div>
									<div class="materialType">{{myList.type}}</div>
									<div class="materialImg"><img v-bind:src="myList.src"></div>
									<div class="materialModel">{{myList.model}}</div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent">{{myList.jiaquan}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{myList.TOVC}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{myList.ben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{myList.jiaben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{myList.erjiaben}}</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="companyList in companyForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand">{{companyList.brand}}</div>
									<div class="materialType">{{companyList.type}}</div>
									<div class="materialImg"><img v-bind:src="companyList.src"></div>
									<div class="materialModel">{{companyList.model}}</div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent">{{companyList.jiaquan}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{companyList.TOVC}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{companyList.ben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{companyList.jiaben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{companyList.erjiaben}}</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="hideList in hideForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand">{{hideList.brand}}</div>
									<div class="materialType">{{hideList.type}}</div>
									<div class="materialImg"><img v-bind:src="hideList.src"></div>
									<div class="materialModel">{{hideList.model}}</div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent">{{hideList.jiaquan}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{hideList.TOVC}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{hideList.ben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{hideList.jiaben}}</p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent">{{hideList.erjiaben}}</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<!--分页器 start-->
							<div class="block mb20">
								<div class="fr">
									 <span class="demonstration fl">每页显示行</span>
								    <el-pagination
								      @size-change="handleSizeChange"
								      @current-change="handleCurrentChange"
								      :current-page="currentPage1"
								      :page-sizes="[10, 20, 30, 40]"
								      :page-size="10"
								      layout="sizes, prev, pager, next"
								      :total="50"
								      class="fl">
								    </el-pagination>
								    <div class="clear"></div>
								</div>
							   <div class="clear"></div>
							</div>
							<!--分页器 end-->
							<div class="buttonBox fr">
								<a class="whiteLargerBtn mr20" @click="dialogTableVisible2 = false" style="border: 0;">取消</a>
								<button class="greenLargerBtn" @click="successful" style="width: 80px;">确定</button>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</el-dialog>	
				<!--添加材料模态框 end-->

			</div>
			<!--项目圈内容 end-->
			
		</div>
		<!--内容 end-->
		
			
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			
		
			//立即复制模态框中的checkBox控制
			$('.copy').click(function(){
				$('.allSelect').click(function(){
					var self = $(this);
					if(!self.find('.el-checkbox__input').hasClass('is-checked')){
						$('.oneSelect').find('.el-checkbox__input').addClass('is-checked');
					}else if(self.find('.el-checkbox__input').hasClass('is-checked')){
						$('.oneSelect').find('.el-checkbox__input').removeClass('is-checked');
					}
				});
			});
			
		
			//户型图选择
			$('.imgType').each(function(index){
				$(this).click(function(){
					$('.imgType').removeClass('active').eq(index).addClass('active');
				});
			});
		
		
			//选项菜单控制
			$('.menu').each(function(index){
				$(this).click(function(){
					$('.menu').removeClass('active').addClass('wrongActive').eq(index).removeClass('wrongActive').addClass('active');
					$('.materialList').addClass('hidden').eq(index).removeClass('hidden');
				});
			});
			
			//contentRight中的列表选择状态切换控制
			$('.contentRight .materialRoomList .materialDec').click(function(){
				if($(this).hasClass('active')){
					$(this).removeClass('active');
				}else{
					$(this).addClass('active');
				}
			});
			
			
			//机械通风表单的添加一行及删除操作控制
			$('.addLine').click(function(){
				$('.addMaterialModalBox').fadeIn();
			});
			//删除
			$(document).on('click','.delete',function(){
				$(this).closest('.materialDec').remove();
			});
			//材料添加模态框关闭
			$('.addMaterialModalBoxClose').click(function(){
				$('.addMaterialModalBox').fadeOut();
			});
			//材料添加模态框左侧菜单控制
			//一级菜单控制
			$('.firstLi').each(function(index){
				$(this).click(function(){
					$('.firstLi').removeClass('active').eq(index).addClass('active');
					$('.secondNav').addClass('hidden');
					$(this).find('.secondNav').removeClass('hidden');
					$('.secondLi').removeClass('active');
					$('.thirdNav').addClass('hidden');
				});
			});
			//二级菜单控制
			$('.secondLi').each(function(index){
				$(this).click(function(e){
					e.stopPropagation();
					$('.secondLi').removeClass('active').eq(index).addClass('active');
					$('.thirdNav').addClass('hidden');
					$(this).find('.thirdNav').removeClass('hidden');
				});
			});
			
			//模态框中的选项菜单
			$('.addLine').click(function(){
				$('.secondMenu').each(function(index){
					$(this).click(function(){
						$('.secondMenu').removeClass('active').addClass('wrongActive').eq(index).removeClass('wrongActive').addClass('active');
						$('.materialRoomList').addClass('hidden').eq(index).removeClass('hidden');
					});
				});
			});
			
		});
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var wayDesign2 = new Vue({
			el:'.wayDesign2',
			data:function(){
				return{
					currentPage1:'1',
					buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType:'',
			        dialogTableVisible: false,
			        dialogTableVisible1: false,
			        modalForm:[
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        ],
			        dialogTableVisible2:false,
					options1: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value1: '',
			        options2: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value2: '',
			        shareForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        myForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        companyForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        hideForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        ],
				}
			},
			methods: {
		      	handleOpen(key, keyPath) {
		        	console.log(key, keyPath);
		      	},
		      	handleClose(key, keyPath) {
		        	console.log(key, keyPath);
		      	},
		      	handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    handleCurrentChange(val) {
			        this.currentPage1 = val;
			        console.log(`当前页: ${val}`);
			    },
		      	successful(){
			        this.$message({
			          	message: '添加成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible2 = false;
			    },
			    successful1(){
			        this.$message({
			          	message: '取消收藏成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible = false;
			    },
			    successful2(){
			    	this.$message({
			          	message: '复制成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible1 = false;
			    }
		    }
		});
		
	</script>
</html>
